body {
  background: #f3f3f3;
}

// 顶部广告区域
.top_banner {
  height: 60px;
  background-color: rgb(255, 137, 22);
  .w {
    position: relative;
    height: 60px;
  }
  img {
    width: 100%;
    height: 60px;
  }
  a:last-child {
    position: absolute;
    right: 0;
    top: 10px;
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-align: center;
    line-height: 20px;
    display: block;
  }
  //目标伪类选择器: 当标签被锚点连接指向的时候会触发该选择器
  &:target {
    display: none;
  }
}
// 顶部导航区域
.topNav {
  width: 100%;
  height: 30px;
  line-height: 30px;

  //  左侧导航
  .leftNav {
    float: left;
    height: 30px;
  }

  // 右侧导航
  .rightNav {
    float: right;
    height: 30px;
    li {
      position: relative;
      z-index: 100;
      float: left;
      margin-left: 28px;
      font-family: "微软雅黑";
      font-weight: 700;
      a:hover {
        color: orangered;
      }
      //向下箭头
      .icon-arrow-down-bold {
        font-size: 12px;
      }
      //二级菜单
      .menu {
        position: absolute;
        top: 30px;
        width: 300px;
        height: 200px;
        background-color: #fff;
        border-radius: 5px;
        display: none;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        .public {
          border-bottom: 1px solid #ccc;
          padding: 10px 5px;
          a {
            margin: 0 10px;
          }
        }
      }

      &:hover .menu {
        display: block;
      }
    }
  }
}
// logo区域
.logo {
  height: 132px;
  background-color: #fff;
  box-shadow: 0 5px 5px 3px #cacaca3f;
  .left_logo {
    float: left;
  }
  .middle_search {
    float: left;
    padding-top: 20px;
    width: 700px;

    //  搜索框
    .search_box {
      position: relative;
      height: 36px;
      border: 1px solid #dd302d;
      float: left;
      input[type="text"] {
        height: 36px;
        width: 511px;
        padding-left: 15px;
        box-sizing: border-box;
        float: left;
        // 该属性只能修改输入框中value属性中的文字
        // color: red;
        // 用来修改placeholder属性中的文字颜色
        &::placeholder {
          color: #666;
        }
      }
      input[type="button"] {
        height: 36px;
        width: 79px;
        background-color: #dd302d;
        float: left;
      }
      .icon-search {
        position: absolute;
        top: 50%;
        right: 30px;
        margin-top: -10px;
        color: #fff;
        font-size: 20px;
      }
    }

    // 购物车
    .car {
      float: right;
      width: 90px;
      height: 36px;
      border: 1px solid #dd302d;
      margin-left: 5px;
      text-align: center;
      line-height: 36px;
      color: #dd302d;
      box-sizing: border-box;
    }
    // 热词搜索
    .hot_words {
      float: left;
      margin-top: 10px;
      li {
        float: left;
        margin-right: 10px;
      }
    }
    // 主体导航
    .nav {
      float: left;
      margin-top: 16px;
      li {
        float: left;
        font-size: 16px;
        color: #666;
        font-weight: 900;
        margin-right: 10px;

        a:hover {
          color: #dd302d;
        }
      }
    }
  }
  .right_banner {
    float: right;
    margin-top: 34px;
    img {
      width: 160px;
      height: 70px;
    }
  }
}

// 主体区域
.main_body {
  //  广告区域
  .main_banner {
    padding-top: 20px;
    .left_aside {
      position: relative;
      width: 190px;
      height: 458px;
      background-color: #fff;
      float: left;
      margin-right: 10px;
      padding-top: 5px;
      box-sizing: border-box;
      z-index: 100;
      li {
        height: 28px;
        line-height: 28px;
        padding-left: 16px;
        &:hover a {
          color: #dd302d;
          cursor: pointer;
        }

        &:hover .second_menu {
          display: block;
        }
      }
      // 二级导航
      .second_menu {
        position: absolute;
        left: 190px;
        top: 0;
        width: 600px;
        //height: 458px;
        min-height: 458px;
        background-color: #fff;
        border: 1px solid #ccc;
        box-sizing: border-box;
        display: none;
      }
    }
    //  中间轮播图
    .scroll_img {
      width: 590px;
      height: 458px;
      background-color: #fff;
      float: left;
      margin-right: 10px;
      overflow: hidden;
      position: relative;
      ul {
        //约束当前元素的最小宽度和最大宽度
        min-width: 3540px;
      }
      li {
        float: left;
      }
      img {
        width: 590px;
        height: 458px;
      }

      //按钮
      .btns {
        position: absolute;
        left: 50px;
        bottom: 20px;
        width: 120px;
        height: 15px;
        a {
          width: 15px;
          height: 15px;
          display: block;
          border-radius: 50%;
          float: left;
          margin-left: 5px;
          border: 1px solid #ccc;
          background-color: #999;
          box-sizing: border-box;
          &:hover {
            background-color: #dd302d;
          }
        }
      }
    }
    .right_banner {
      width: 190px;
      height: 458px;
      background-color: #fff;
      float: left;
      margin-right: 10px;
      a {
        display: block;
      }
      //行内元素默认不支持上下外边距
      a:nth-child(2) {
        margin: 10px 0;
      }
    }
    .right_service_list {
      width: 190px;
      height: 458px;
      background-color: #fff;
      float: left;

      //用户信息列表区域
      .userMsg {
        width: 150px;
        height: 84px;
        border-bottom: 1px solid #ccc;
        margin: 20px auto 17px;

        .topimg {
          img {
            float: left;
          }
          .userinfo {
            float: left;
            position: relative;
            margin-left: 10px;
          }
          a {
            margin-right: 10px;
          }
          .line {
            position: absolute;
            left: 30px;
            top: 20px;
            width: 2px;
            height: 12px;
            background-color: #999;
          }
        }

        .tips {
          margin-top: 15px;
          span {
            width: 64px;
            height: 22px;
            display: block;
            background-color: #dd302d;
            text-align: center;
            line-height: 22px;
            border-radius: 10px;
            color: #fff;
            float: left;
            margin-right: 5px;

            &:last-child {
              background-color: #363634;
              color: #beb482;
            }
          }
        }
      }
      // 御码快报
      .yuma {
        width: 170px;
        margin: 0 auto;

        .title {
          h4 {
            float: left;
          }
          a {
            float: right;
            font-family: "宋体";
            font-weight: 700;
            color: #999;
          }
        }

        .content {
          margin-top: 10px;
          .item {
            height: 22px;
            line-height: 22px;
            margin-top: 4px;
            span {
              width: 44px;
              height: 22px;
              display: block;
              text-align: center;
              background-color: #ffe7e7;
              color: #dd302d;
              float: left;
            }
            p {
              float: left;
              width: 110px;
              word-break: keep-all;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-left: 5px;
            }
          }
        }
      }

      // 服务列表
      .service_list {
        width: 170px;
        height: 174px;
        margin: 16px auto;
        .item {
          width: 36px;
          height: 46px;
          text-align: center;
          float: left;
          margin-right: 8px;
          margin-bottom: 18px;
          &:nth-child(4n) {
            margin-right: 0;
          }
          &:nth-child(2) {
            .bg {
              background-position: -38px 0;
            }
          }
          .bg {
            width: 26px;
            height: 25px;
            display: inline-block;
            background: url(../img/侧边栏图标_默认@1x.png) no-repeat;
          }
        }

        //鼠标悬停
        //   .item:nth-child(1):hover {
        //       .bg {
        //           background-image: url(../img/侧边栏图标_hover@1x.png);
        //       }
        //   }
        //   .item:nth-child(2):hover {
        //       .bg {
        //           background-image: url(../img/侧边栏图标_hover@1x.png);
        //       }
        //   }

        .item:hover .bg {
          background-image: url(../img/侧边栏图标_hover@1x.png);
        }
      }
    }
  }

  // 秒杀区域
  .seckill {
    height: 266px;
    margin: 10px 0;
    // 左侧区域
    .left_seckill {
      position: relative;
      h4 {
        position: absolute;
        left: 50%;
        top: 30px;
        font-size: 30px;
        margin-left: -47px;
        color: #fff;
      }
    }
    // 右侧区域
    .right_seckill {
      width: 190px;
      height: 266px;
      background-color: #8859d4;
    }
    //中间秒杀区域
    .middle_seckill {
      width: 790px;
      height: 266px;
      background-color: #fff;
      margin: 0 10px;
      .item {
        width: 190px;
        height: 266px;
        overflow: hidden;
        float: left;
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
        &:hover {
          border: 1px solid #ccc;
          box-sizing: border-box;
        }
        img {
          margin: 20px auto;
        }
        p {
          width: 160px;
          text-align: center;
          margin: 0 auto;

          &:nth-child(2) {
            overflow: hidden;
            word-break: keep-all;
            text-overflow: ellipsis;
            margin-bottom: 15px;
          }
        }
      }
    }
  }

  //购物节
  .shopping {
    width: 1270px;
    height: 555px;
    background: url(../img/年货推荐_背景@1x.png) no-repeat;
    margin: 0 auto;
    ul {
      padding: 110px 40px 0;
    }
    li {
      width: 190px;
      height: 210px;
      background: url(../img/年货产品背景框框@1x.png);
      overflow: hidden;
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
      &:nth-child(6n) {
        margin-right: 0;
      }
      img {
        margin: 10px auto;
      }

      p:nth-child(2) {
        width: 190px;
        height: 32px;
        background: url(../img/年货产品_免息横幅@1x.png) no-repeat;
        text-align: center;
        line-height: 32px;
        color: #fff;
        margin-top: 16px;
      }
      p:last-child {
        margin-top: 10px;
        color: #dd302d;
        text-align: center;
      }
    }
  }

  // 每日特价
  .special {
    margin: 15px 0;

    .left_special {
      width: 590px;
      height: 318px;
      background-color: #fff;
      padding: 10px;
      box-sizing: border-box;
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }
      .title {
        h4 {
          font-size: 24px;
          color: #000;
        }
        img {
          margin-top: 10px;
          margin-left: 10px;
        }
        a {
          margin-top: 10px;
          font-size: 14px;
          color: #dd302d;
        }
      }

      .content {
        margin-top: 10px;

        .left_content {
          width: 180px;
          height: 254px;
          background-color: #f8f8f8;

          a img {
            margin: 10px auto;
          }

          p {
            text-align: center;

            &:nth-child(3) {
              font-size: 14px;
              color: #000;
            }

            &:nth-child(4) {
              font-size: 14px;
              color: #dd302d;
              margin: 10px 0;
              font-weight: 700;
            }
            &:last-child {
              color: #ccc;
            }
          }
        }

        .right_content {
          width: 390px;
          height: 254px;
          padding-top: 32px;
          box-sizing: border-box;
          .item {
            width: 190px;
            height: 90px;
            padding-left: 5px;
            box-sizing: border-box;
            float: left;
            margin-bottom: 10px;
            img {
              float: left;
            }

            p {
              width: 85px;
              float: left;
              margin-left: 10px;
              &:nth-child(2) {
                font-size: 14px;
                color: #000;
              }
              &:nth-child(3) {
                color: #dd302d;
                margin-top: 10px;
                margin-bottom: 5px;
              }
              &:last-child {
                color: #ccc;
              }
            }
          }
        }
      }
    }
  }

  // 全球购
  .global {
    .title {
      height: 60px;
      line-height: 60px;
      font-size: 30px;
      color: #000;
      text-align: center;
    }

    .content {
      .item{
         margin-right: 10px;
         &:last-child {
            margin-right: 0;
         }
         &:nth-child(n+3) {
            .public {
                margin-top: 0;
                margin-bottom: 10px;
            }
         }
      }
      .public {
        padding: 10px;
        background-color: #fff;
        width: 290px;
        height: 180px;
        box-sizing: border-box;
        margin-top: 10px;
        h4 {
          font-size: 14px;
          color: #000;
          margin-right: 10px;
        }
        span {
          color: #ccc;
          font-size: 12px;
        }

        .public_content {
          margin-top: 10px;
          a {
            float: left;
            &:first-child {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
